<template>
	<div class="myPage">
		<header>
			<div class='user-info' v-if='loginStatus'>
				<img :src="userInfo.imgUrl" alt="">
				<span>{{userInfo.nickName}}</span>
			</div>
			<div v-else class='login' @click='goLogin'>登录/注册</div>
			
		</header>
		<section>
			<ul>
				<li>地址管理</li>
				<li v-if='loginStatus' @click='loginOut'>退出登录</li>
			</ul>
		</section>
		<Tabbar></Tabbar>
	</div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
import Tabbar from '@/components/common/Tabbar.vue'
export default {
	name: 'MyPage',
	computed:{
		...mapState({
			loginStatus:state=>state.user.loginStatus,
			userInfo:state=>state.user.userInfo
		})
	},
	components:{
		Tabbar,
	},
	methods:{
		...mapMutations(['loginOut']),
		  goLogin(){
			  this.$router.push('/login');
		  },
		  
	  }
}
</script>

<style scoped lang="scss">
	header{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 160px;
		background-color: #B0352F;
		
	}
	.login{
		padding:5px 20px;
		font-size:18px;
		color:#fff;
		background-color:#F6AB32;
		border-radius: 6px;
	}
	.user-info{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		img{
			width: 66px;
			height:66px;
			border-radius: 50%;
		}
		span{
			padding:10px 0;
			font-size:18px;
			color:#fff;
		}
	}
	section{
		flex:1;
		overflow: hidden;
		ul li{
			padding:15px;
			font-size:16px;
		}
	}
</style>
